import Navbar from '../../compoents/Navbar'
import { useNavigate } from 'react-router-dom'
import { Button } from 'antd-mobile'
import style from './index.module.css'

function Index() {
  const navigate = useNavigate()
  
  const handleAgree = () => {
    navigate('/BingAn')
  }
  
  return (
    <div className={style.container}>
      <Navbar title='住院病案复印须知' showBack onBack={()=>navigate(-1)} />
      
      <div className={style.content}>
        {/* 标题 */}
        <div className={style.title}>住院病案复印须知</div>
        
        {/* 介绍文字 */}
        <div className={style.intro}>
          为了更好地服务患者,现将我院住院病案复印流程通知如下:
        </div>
        
        {/* 主要内容 */}
        <div className={style.mainContent}>
          {/* 第一部分：患者出院后复印病案时间 */}
          <div className={style.sectionTitle}>
            I. 患者出院后复印病案时间
          </div>
          <div className={style.paragraph}>
            患者出院后14天后方可复印病案。因我院病案需要归档、审核、装订等流程,为确保病案完整,请您耐心等待。
          </div>
          
          {/* 第二部分：复印病历方式 */}
          <div className={style.sectionTitle}>
            II. 复印病历方式
          </div>
          
          <div className={style.subSection}>
            <div className={style.subSectionTitle}>
              (一) 现场复印
            </div>
            <div className={style.paragraphWithIndent}>
              患者出院14天后可到我院病案复印窗口:住院楼一楼住院服务中心处进行现场复印。建议避开周一,周一患者较多。
            </div>
          </div>
          
          <div className={style.subSection}>
            <div className={style.subSectionTitle}>
              (二) 微信公众号预约登记复印提取方式有2种选择:自取或邮寄。
            </div>
          </div>
          
          {/* 第三部分：复印病历需携带手续 */}
          <div className={style.sectionTitle}>
            III. 复印病历需携带手续
          </div>
          
          <div className={style.subSection}>
            <div className={style.subSectionTitle}>
              (一) 患者本人办理
            </div>
            <div className={style.paragraphWithIndent}>
              出院结算清单和有效身份证件原件
            </div>
          </div>
          
          <div className={style.subSection}>
            <div className={style.subSectionTitle}>
              (二) 非患者本人办理
            </div>
            <div className={style.paragraphWithIndent}>
              患者出院结算单、患者和办理者两人的身份证原件
            </div>
          </div>
          
          <div className={style.subSection}>
            <div className={style.subSectionTitle}>
              (三) 未成年人患者的病历复印
            </div>
            <div className={style.paragraphWithIndent}>
              患者出院结算单、患者及监护人的户口原件(两者户口必须在一起或能证明与未成年人关系的法定证明材料)、监护人本人身份证原件。
            </div>
          </div>
          
          <div className={style.specialNote}>
            <span className={style.emphasis}>特此强调说明:</span>有效身份证件指本市医保卡或身份证(证件均必须是原件)
          </div>
          
          {/* 第四部分：复印病历收费 */}
          <div className={style.sectionTitle}>
            IV. 复印病历收费
          </div>
          
          <div className={style.subSection}>
            <div className={style.subSectionTitle}>
              (一) 现场复印
            </div>
            <div className={style.paragraphWithIndent}>
              按照现场复印病历纸张数收取费用。
            </div>
          </div>
          
          <div className={style.subSection}>
            <div className={style.subSectionTitle}>
              (二) 预约复印
            </div>
            <div className={style.paragraphWithIndent}>
              先收取预交费用,待复印好后根据张数加上邮寄快递费用"多退少补"来收取复印费用。
            </div>
          </div>
          
          {/* 第五部分：复印病历用途 */}
          <div className={style.sectionTitle}>
            V. 复印病历用途
          </div>
          <div className={style.paragraph}>
            复印病历用途请明确说明,通常包括:
          </div>
          
          <div className={style.purposeList}>
            <div className={style.purposeItem}>
              (一) 医保报销
            </div>
            <div className={style.purposeItem}>
              (二) 办理门特(本市)
            </div>
            <div className={style.purposeItem}>
              (三) 看病复诊
            </div>
            <div className={style.purposeItem}>
              (四) 自留用途
            </div>
            <div className={style.purposeItem}>
              (五) 其他
            </div>
          </div>
          
          <div className={style.specialNote}>
            <span className={style.emphasis}>特别提醒:</span>如未明确说明用途,我院将按医保报销用途复印病历。
          </div>
          
          {/* 第六部分：复印病历的工作时间及咨询电话 */}
          <div className={style.sectionTitle}>
            VI. 复印病历的工作时间及咨询电话
          </div>
          
          <div className={style.workTime}>
            <div><span className={style.emphasis}>工作时间:</span>周一至周五(国家法定节假日除外)</div>
            <div><span className={style.emphasis}>上午:</span>8:00—12:00</div>
            <div><span className={style.emphasis}>下午:</span>14:00—17:00</div>
          </div>
        </div>
      </div>
      
      {/* 底部同意按钮 */}
      <div className={style.footerSection}>
        <Button className={style.agreeButton} onClick={handleAgree}>
          我已阅读并同意须知
        </Button>
      </div>
    </div>
  )
}

export default Index
